<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script charset="utf-8" type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="/js/com.wxd.js"></script>
    <link rel="stylesheet" type="text/css" href="/style/com.wxd.css"/>
    <title>nav</title>
    <style>
        body {overflow: auto;}

        ul, li {width: 180px;box-sizing: border-box;margin: 0;padding: 0;}

        .title_box {border: 1px solid #888888;border-right: 0;}

        .title_box li {cursor: pointer;}

        .title_box.ul_left {border-left: #01d390 3px solid;}

        .title_one {height: 34px;line-height: 32px;padding-left: 3px; font-size: 14px;font-weight: bold;position: relative;}

        .title_one strong {position: absolute;right: 8px;font-weight: bold;font-size: 16px;}

        .title_one.check {background-color: rgba(2, 82, 115, 0.7);}

        .title_one:hover {background-color: #1a78d6;}

        /*.title_one {border-bottom: 1px solid #888888;}*/

        .title_sub_box {}

        .title_sub {font-size: 12px;}

        .title_sub li {padding-left: 12px;height: 26px;line-height: 22px;}

        .title_sub li.check {background-color: #cf7e47;height: 32px;line-height: 32px;}

        .title_sub li:hover {background-color: #0f7e77;height: 32px;line-height: 32px;}
    </style>
    <script>
        function selectNav(self) {
            // 移除所有 title_one 的 check 类，然后给当前元素添加 check 类
            $(".title_one").removeClass("check");
            $(".title_one").parent("ul").removeClass("check");
            $(self).addClass("check");
            $(self).parent("ul").addClass("ul_left");
            let next = $(self).next("li");
            $(".title_sub_box").each(function () {
                if (this === next[0]) {
                    $(this).slideDown(500);
                    return;
                }
                $(this).slideUp(200);
            });
        }

        function selectNav2(self, url) {
            $(".title_sub li").removeClass("check");
            $(self).addClass("check");
            window.parent.changeContent(url);
        }

        function logout() {
            sessionStorage.setItem("authorization", "");
            wxd.clearCookie();
            window.top.location.href = "/login.html";
        }

        $(() => {
        });

    </script>
</head>
<body>
<div style="height: 80px;">
    <button onclick="logout();">退出</button>
</div>
<ul class="title_box ul_left">
    <li class="title_one check" onclick="selectNav(this)">导航<strong>∨</strong></li>
    <li class="title_sub_box">
        <ul class="title_sub">
            <#list navList as nav>
                <li onclick="selectNav2(this, '${nav.routing}')">${nav.name}</li>
            </#list>
        </ul>
    </li>
</ul>
<ul class="title_box">
    <li class="title_one" onclick="selectNav(this)">日志<strong>∨</strong></li>
    <li class="title_sub_box" style="display: none;">
        <ul class="title_sub">
            <#list logNavList as nav>
                <li onclick="selectNav2(this, '${nav.routing}?tableName=${nav.name}')">${nav.comment}</li>
            </#list>
        </ul>
    </li>
</ul>
</body>
</html>